<template>
    <div class="WorkingSchedule" v-loading="loading" element-loading-text="拼命加载中">
        <el-form size="mini" ref="form" :model="form" label-position="top" class="myform">
            <div>
                <el-form-item label="款号" class="myform-item">
                    <el-input v-model="form.type_no" placeholder="请输入款号" style="width: 120px;" @keyup.enter.native="onSearch" clearable></el-input>
                </el-form-item>
                <el-form-item label="款名" class="myform-item">
                    <el-input v-model="form.type_name" placeholder="请输入款名" style="width: 120px;" @keyup.enter.native="onSearch" clearable></el-input>
                </el-form-item>
                <el-form-item label="品牌" class="myform-item">
                    <el-select v-model="form.brand_code" placeholder="请选择" style="width: 120px;">
                        <el-option v-for="(item,index) in brandCodes" :key="index" :label="item.brand_name" :value="item.brand_code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-top: 39px">
                    <div style="display: flex">
                        <el-button type="primary" @click="onSearch">查询</el-button>
                        <el-button type="primary" @click="onBatchProportion">批量平台比例</el-button>
                        <el-button type="primary" @click="anticipateddialogVisibleBatch = true">批量预计到货期</el-button>
                        <el-button style="margin-left: 10px" size="mini" type="primary" @click="onUpdate">更新库存</el-button>
                        <el-button style="margin-left: 10px" size="mini" @click="onExcel">生成导出数据</el-button>
                        <el-upload style="margin-left: 10px"
                            action="https://ssy.13yu.com/index.php/Admin/Excel/orderproductExcel_arrivaldate"
                            :on-success="handleAvatarSuccess">
                            <el-button size="mini" type="">到货日期导入</el-button>
                        </el-upload>
                    </div>
                </el-form-item>
            </div>
            <div></div>
        </el-form>
<!--        <div class="date">-->
            <!-- <div class="date-left">
              <div class="date-left-time">
                <div class="date-left-time-button pointer" @click="onUpdateTime(1)">
                  <i class="el-icon-arrow-left"></i>
                </div>
                <div class="date-left-time-list">
                  <div
                    :class="form.batch_date == item.batch_date ? 'borderSelect' : ''"
                    class="pointer"
                    v-for="item in datelist"
                    :key="item.id"
                    @click="onBatchDate(item.batch_date)"
                  >
                    {{ item.batch_date }}
                  </div>
                </div>

                <div class="date-left-time-button pointer" @click="onUpdateTime(0)">
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <span style="margin-left: 30px">最后更新日期：{{ savetime }}</span>
            </div> -->
            <!-- <div style="margin: 0 0 20px; display: flex; align-items: center"> -->
            <!-- <download-excel
              class="export-excel-wrapper"
              :data="json_data"
              :fields="json_fields"
              :before-generate="startDownload"
              title="库存分配"
              name="库存分配.xls"
            >
              <el-button size="mini" type="primary">导出EXCEL</el-button>
            </download-excel> -->
            <!-- <div class="searchleft">
                <el-select
                  class="sel"
                  v-model="batch_date"
                  placeholder="请选择"
                  size="mini"
                >
                  <el-option label="全部数据" value=""> </el-option>
                  <el-option
                    v-for="item in datelist"
                    :key="item.id"
                    :label="item.batch_date"
                    :value="item.batch_date"
                  >
                  </el-option>
                </el-select>
                <div
                  type="primary"
                  @click="onExcel"
                  class="searchleft-button pointer"
                >
                  <i class="el-icon-download"></i>导出
                </div>
              </div>

              <el-button
                style="margin-left: 10px"
                size="mini"
                type="primary"
                @click="onUpdate"
                >更新库存</el-button
              >
            </div> -->
<!--        </div>-->

        <el-table ref="mytable" size="mini" :data="tableData" style="width: 100%" border>
            <el-table-column label="款号" align="center" prop="type_no"></el-table-column>
            <el-table-column label="SKU" align="center" prop="product_code"></el-table-column>
            <el-table-column label="款名" align="center" prop="product_name"></el-table-column>
            <!-- <el-table-column label="颜色规格" align="center" prop="a_color"></el-table-column>
            <el-table-column label="部件名称" align="center" prop="a_specifications"></el-table-column>-->
            <el-table-column label="部件" align="center" prop="a_parts"></el-table-column>
            <!-- <el-table-column label="尺码" align="center" prop="a_size"></el-table-column> -->
            <el-table-column label="图片" align="center" prop="img" width="150">
                <template slot-scope="{ row }">
                    <el-image :src="row.img" v-if="row.img" fit="fill" :preview-src-list="[row.img]"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="淘宝(预售)/现货" align="center" prop="tb">
                <template slot-scope="{ row }">
                    <div><span style="color: #ffca42; font-size: 16px">{{row.tb.yushou }}</span>/<span style="color: #71d5a1; font-size: 16px">{{row.tb.xianhu}}</span></div>
                </template>
            </el-table-column>
            <el-table-column label="天猫（预售/现货）" align="center" prop="tm">
                <template slot-scope="{ row }">
                    <div><span style="color: #ffca42; font-size: 16px">{{row.tm.yushou }}</span>/<span style="color: #71d5a1; font-size: 16px">{{row.tm.xianhu}}</span></div>
                </template>
            </el-table-column>
            <el-table-column label="抖音（预售/现货）" align="center" prop="dy">
                <template slot-scope="{ row }">
                    <div><span style="color: #ffca42; font-size: 16px">{{row.dy.yushou}}</span>/<span style="color: #71d5a1; font-size: 16px">{{row.dy.xianhu}}</span></div>
                </template>
            </el-table-column>
            <el-table-column label="报次数" width="80" align="center" prop="bao_number"></el-table-column>
            <el-table-column label="留存" width="80" align="center" prop="liu">
                <template slot-scope="{ row }">
                    <div>{{ row.liu.yuliu }}</div>
                </template>
            </el-table-column>
            <!-- <el-table-column label="测试可销数" align="center" prop="kx_num">
              <template slot-scope="{ row }">
                <div>{{ row.kx_num || 0 }}</div>
              </template>
            </el-table-column> -->
            <el-table-column label="总数" align="center" prop="count" width="80"></el-table-column>
            <el-table-column label="预售总数/现货总数" align="center" prop="xianhu">
                <template slot-scope="{ row }">
                    {{ row.yushou || 0 }}/{{ row.xianhu || 0 }}
                </template>
            </el-table-column>
            <!-- <el-table-column
              label="加工单数"
              align="center"
              prop="amount"
            ></el-table-column> -->
            <el-table-column label="预计到货日期" align="center" prop="arrivaldate"></el-table-column>
            <el-table-column label="预计到货天数" align="center" prop="arrivaldate_title"></el-table-column>
            <el-table-column label="更新时间" align="center" prop="kx_updatetime"></el-table-column>
            <!-- <el-table-column label="操作" align="center">
              <template slot-scope="{ row }">
                <el-button type="text" size="default" @click="onAudit(row)"
                  >编辑</el-button
                >
              </template>
            </el-table-column>-->
        </el-table>
        <paginationtwenty :form="form" :total="total" @paginationPostOrderTaskList="postAdminOperateGetamountdata"/>
        <!-- 审核 -->
        <el-dialog title="编辑比例" :visible.sync="auditdialogVisible" :close-on-click-modal="false" width="30%">
            <div>
                <div>款号：{{ detail.type_no }}</div>
                <div style="margin-top: 20px">SKU：{{ detail.product_code }}</div>
                <div style="margin-top: 20px">款名：{{ detail.product_name }}</div>
                <div>
                    <div v-for="(item, index) in detaillist" :key="index" style="margin-top: 20px">
                        {{ item.title }}（%）
                        <el-input v-model="item.proportion" type="number" :min="1" :max="100"></el-input>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="auditdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 批量平台比例 -->
        <el-dialog title="批量平台比例" :visible.sync="auditdialogVisibleBatch" :close-on-click-modal="false" :before-close="handleClose" width="30%">
            <div>
                <div style="display: flex; align-items: center">
                    款号：
                    <el-input v-model="type_no" placeholder="请输入款号" @change="onChangeTypeNo" style="width: 220px"></el-input>
                </div>
                <div v-if="detaillist.length" style="display: flex; align-items: center; flex-wrap: wrap">
                    <div v-for="(item, index) in detaillist" :key="index" style="margin-top: 20px">
                        {{ item.title }}（%）
                        <el-input v-model="item.proportion" type="number" :min="1" :max="100"></el-input>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="auditdialogVisibleBatch = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitBatch" :disabled="isSubmit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 批量预计到货期 -->
        <el-dialog title="批量预计到货期" :visible.sync="anticipateddialogVisibleBatch" :close-on-click-modal="false" width="30%">
            <div>
                <div style="display: flex; align-items: center">
                    <div style="width: 120px; text-align: right">款号：</div>
                    <el-input v-model="type_no" placeholder="请输入款号" style="width: 220px"></el-input>
                </div>
                <div style="margin-top: 20px; display: flex; align-items: center">
                    <div style="width: 120px; text-align: right">请选择日期：</div>

                    <el-date-picker v-model="date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
                </div>
                <div style="margin-top: 20px; display: flex; align-items: center">
                    <div style="width: 120px; text-align: right">预计到货天数：</div>

                    <el-input v-model="arrivaldate_title" placeholder="请输入预计到货天数" style="width: 220px"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="anticipateddialogVisibleBatch = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitBatchAnticipated" :disabled="!type_no">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    postAdminOperateGetamountdata,
    postAdminOperateSetskuproportion,
    postAdminOperateGetskuproportion,
    postAdminOperateSet_amount_data,
    postAdminAdminOperateGet_platform_site,
    postAdminAdminOperateVerificationTypeno,
    postAdminAdminOperateSetArrivalDate,
    postAdminOperateSet_type_proportion,
    postAdminExcelGetStockexport,
    postAdminOperateGet_lately_batch,
    postAdminExcelCreate_excel_task,
} from "@/api";
import pagination from "@/components/pagination.vue";
import paginationtwenty from "@/components/paginationtwenty.vue";

export default {
    components: { pagination, paginationtwenty },
    data() {
        return {
            browserHeight: "",
            isSubmit: true,
            loading: false,
            auditdialogVisible: false, // 审核
            auditdialogVisibleBatch: false, // 批量平台比例
            anticipateddialogVisibleBatch: false, // 批量预计到货期
            height: `${document.documentElement.clientHeight - 400}`,
            savetime: "",
            batch_date: "",
            batch_datePage: {
                slide: 0,
                page: 1,
            },
            type_no: "", // 款号
            date: "", // 日期
            arrivaldate_title: "", // 预计到货天数
            brandCodes:[{brand_code: "SSY", brand_name: "十三余"},{brand_code: "YXRG", brand_name: "有香"},{brand_code: "YXYM", brand_name: "一弦一木"}],
            form: {
                batch_date: "",
                type_no: "",
                type_name: "",
                brand_code: "SSY",
                page: 1,
                size: 20,
            },
            tableData: [],
            total: 1,
            detail: "",
            detaillist: [],
            json_data: [],
            json_fields: {
                款号: "type_no",
                SKU: "product_code",
                款名: "product_name",
                // "颜色规格": "a_color",
                // "部件名称": "a_specifications",
                部件: "a_parts",
                尺码: "a_size",
                图片: "img",
                淘宝预售: "tb.yushou",
                淘宝现货: "tb.xianhu",
                天猫预售: "tm.yushou",
                天猫现货: "tm.xianhu",
                抖音预售: "dy.yushou",
                抖音现货: "dy.xianhu",
                留存: "liu.yuliu",
                总数: "count",
                预计到货日期: "arrivaldate",
            },
        };
    },
    async activated() {
        let browserHeight =
            window.innerHeight ||
            document.documentElement.clientHeight ||
            document.body.clientHeight;
        this.browserHeight = browserHeight - 290;
        let form = this.form;
        this.postAdminOperateGetamountdata(form);
        // await this.postAdminOperateGet_lately_batch();

        // this.postAdminAdminOperateGet_platform_site()
    },
    methods: {
        handleAvatarSuccess(res, file) {
            console.log("res---->", res);
            console.log("file---->", file);
            if (res.code == 0) {
                this.$message.success(res.msg);
                let form = this.form;
                this.postAdminOperateGetamountdata(form);
            } else {
                this.$message.warning(res.msg);
            }
        },
        onBatchDate(e) {
            this.form.batch_date = e;
            this.form.page = 1;
            let form = this.form;
            this.postAdminOperateGetamountdata(form);
        },
        onUpdateTime(e) {
            let { batch_datePage } = this;
            if (batch_datePage.slide == e) {
                batch_datePage.page = batch_datePage.page + 1;
                this.postAdminOperateGet_lately_batch();
            } else if (batch_datePage.page > 1) {
                batch_datePage.page = batch_datePage.page - 1;
                this.postAdminOperateGet_lately_batch();
            } else {
                batch_datePage.slide = e;
                this.postAdminOperateGet_lately_batch();
            }
        },
        async postAdminOperateGet_lately_batch() {
            let res = await postAdminOperateGet_lately_batch(this.batch_datePage);
            let date = res.date;
            if (this.batch_datePage.slide == 1) {
                date.reverse();
            }
            this.form.batch_date = date[0].batch_date;
            this.datelist = res.date;
            let form = this.form;
            this.postAdminOperateGetamountdata(form);
        },
        async onExcel() {
            // window.location.href = "https://ssy.13yu.com/index.php/Admin/Excel/getStockexport?type_no="+this.form.type_no
            // window.open(
            //   "https://ssy.13yu.com/index.php/Admin/Excel/getStockexport?type_no=" +
            //     this.form.type_no +
            //     "&batch_date=" +
            //     this.batch_date
            // );
            // postAdminExcelGetStockexport(obj).then(res=>{
            //   console.log("res--->",res);
            // })

            let obj = {
                type_no: this.form.type_no,
                brand_code: this.form.brand_code,
            };
            try {
                postAdminExcelCreate_excel_task(obj);
                this.$alert("稍后请前往 导出任列表 查看", "提示", {
                    confirmButtonText: "确定",
                    callback: (action) => {},
                });
            } catch (error) {}
        },
        handleClose() {
            this.type_no = "";
            this.detaillist = [];
            this.date = "";
            (this.arrivaldate_title = ""), (this.auditdialogVisibleBatch = false);
            this.anticipateddialogVisibleBatch = false;
        },
        onChangeTypeNo() {
            let type_no = this.type_no;
            if (type_no) {
                let obj = {
                    type_no,
                };
                postAdminOperateGetskuproportion(obj).then((res) => {
                    this.detaillist = res.data;
                    this.isSubmit = false;
                });
            }
        },
        // 批量平台比例弹窗
        onBatchProportion() {
            this.auditdialogVisibleBatch = true;
        },
        // 平台列表
        postAdminAdminOperateGet_platform_site() {
            postAdminAdminOperateGet_platform_site().then((res) => {
                console.log("平台列表---->", res);
                let arr = [];
                res.data.forEach((e) => {
                    let obj = {
                        site_id: e.id,
                        proportion: "",
                        title: e.title,
                    };
                    arr.push(obj);
                });
                this.detaillist = arr;
            });
        },
        onUpdate() {
            // this.loading = true;
            let form = this.form;
            postAdminOperateSet_amount_data().then((res) => {});
            this.$message.success("请三分钟以后刷新页面");
        },
        onSubmitBatchAnticipated() {
            let obj = {
                type_no: this.type_no,
            };
            postAdminAdminOperateVerificationTypeno(obj).then((res) => {
                obj.data = this.date;
                obj.arrivaldate_title = this.arrivaldate_title;
                postAdminAdminOperateSetArrivalDate(obj).then((res) => {
                    this.postAdminOperateGetamountdata(this.form);
                    this.$message.success("编辑成功");
                    this.handleClose();
                });
            });
        },
        onSubmit() {
            let detaillist = JSON.parse(JSON.stringify(this.detaillist));
            detaillist.forEach((element) => {
                delete element.createtime;
                delete element.id;
                delete element.listorder;
                delete element.logo;
                delete element.marks;
                delete element.title;
                delete element.sku_code;
            });

            let obj = {
                sku_code: this.detail.product_code,
                data: detaillist,
            };
            postAdminOperateSetskuproportion(obj).then((res) => {
                this.$message.success("编辑成功");
                this.auditdialogVisible = false;
            });
        },
        //   批量平台比例确认
        onSubmitBatch() {
            let detaillist = JSON.parse(JSON.stringify(this.detaillist));
            detaillist.forEach((element) => {
                delete element.createtime;
                delete element.id;
                delete element.listorder;
                delete element.logo;
                delete element.marks;
                delete element.title;
                delete element.sku_code;
            });

            let obj = {
                type_no: this.type_no,
                data: detaillist,
            };
            postAdminOperateSet_type_proportion(obj).then((res) => {
                this.postAdminOperateGetamountdata(this.form);
                this.$message.success("编辑成功");
                this.auditdialogVisible = false;
            });
        },
        //   审核
        async onAudit(e) {
            this.detail = e;
            let obj = {
                sku_code: e.product_code,
            };
            await postAdminOperateGetskuproportion(obj).then((res) => {
                this.detaillist = res.data;
            });
            this.auditdialogVisible = true;
        },
        // 采购列表
        async postAdminOperateGetamountdata(data) {
            this.loading = true;
            this.form = data;
            postAdminOperateGetamountdata(data)
                .then((res) => {
                    this.loading = false;
                    console.log("采购列表", res);
                    this.savetime = res.savetime;
                    this.tableData = res.data;
                    this.total = Number(res.total);
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
        async startDownload() {
            let form = this.form;
            let data = JSON.parse(JSON.stringify(form));
            let arr = [];
            data.size = 1000;
            let total = this.total;
            let num = Math.ceil(total / 1000);
            for (let index = 1; index <= num; index++) {
                data.page = index;
                await postAdminOperateGetamountdata(data)
                    .then((res) => {
                        console.log("采购列表onFetch", res);
                        arr.push(...res.data);
                    })
                    .catch((err) => {
                        this.loading = false;
                    });
                this.json_data = arr;
            }
        },
        // 搜索
        async onSearch() {
            this.form.page = 1;
            this.form.size = 20;
            await this.postAdminOperateGetamountdata(this.form);
        },
    },
};
</script>

<style lang="scss" scoped>
.searchleft {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 3px;

    .searchleft-button {
        text-align: center;
        height: 28px;
        width: 60px;
        line-height: 28px;
        background: #eee;
        color: #000;
    }
    /deep/ .el-select {
        width: 140px;
        display: inline-block;
        input {
            font-size: 12px;
            border: none;
            background: none;
        }
    }
}
.date {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    /deep/ .el-button--mini {
    }
    .date-left {
        display: flex;
        align-items: center;
        .date-left-time {
            display: flex;
            align-items: center;
            .date-left-time-button {
                border: 1px solid #ddd;
                height: 28px;
                width: 36px;
                text-align: center;
                line-height: 28px;
                border-radius: 4px;
                color: #999;
            }
            .date-left-time-list {
                display: flex;
                margin: 0 10px;
                > div {
                    height: 28px;
                    width: 140px;
                    text-align: center;
                    line-height: 28px;
                    border: 1px solid #ddd;
                }
                > div:not(:nth-child(1)) {
                    border-left: none;
                }
                > div:nth-child(1) {
                    border-top-left-radius: 4px;
                    border-end-start-radius: 4px;
                }
                > div:nth-last-child(1) {
                    border-top-right-radius: 4px;
                    border-end-end-radius: 4px;
                }
            }
        }
    }
}
.borderSelect {
    border: 1px solid #2e71d6 !important;
    background: rgba(46, 113, 214, 0.1);
    color: #2e71d6;
}
.myform {
    display: flex;
    justify-content: space-between;
    > div {
        display: flex;
    }
    &-item {
        margin-right: 10px;
    }
    /deep/ .el-upload-list {
        display: none;
    }
}
.WorkingSchedule {
    background: #ffff;
    padding: 20px;
    border-radius: 2px;
    @include boxShadow;
    font-size: 14px;
}
</style>
